<template>
  <el-row class="ClientBox">
    <el-button @click="debugg">debug</el-button>
    <el-row class="ClientBg">
      <el-row class="ClientContent">
        <h3 class="ClientTitle">报价设置 <span class="icon">></span></h3>
      </el-row>
      <el-row>
        <el-tabs type="border-card">
          <el-tab-pane label="子项设置">
            <el-row>
             <el-col :span="21">
               <el-button size="mini" type="primary">导入</el-button>
               <el-button size="mini" type="primary">保存</el-button>
               <el-button size="mini" type="primary" v-if="!isEdit" @click="isEdit=true">编辑</el-button>
               <el-button size="mini" type="primary" v-else @click="isEdit=false">取消编辑</el-button>
             </el-col>
             <el-col :span="3" >
               <el-button size="mini" type="primary" >添加</el-button>
             </el-col>
           </el-row>
            <div class="mytable">
              <table>
                <thead>
                    <tr>
                        <th width="80px">编号</th>
                        <th width="50px">项目名称</th>
                        <th width="50px">单位</th>
                        <th width="50px">单价(元)</th>
                        <th width="50px">工艺做法及材料说明</th>
                        <th v-show="isEdit" width="50">操作</th>
                    </tr>
                </thead>
                <tbody v-for="(group, index) in subItemTableItem">
                        <tr>
                          <td colspan="5" style="text-align: left;" @click="showToggle(group,index)">
                              <span  class="priceTitle">
                                <span :class="!group.isShow ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></span>
                                {{group.classifyName}}
                              </span>
                          </td>
                          <td v-show="isEdit">
                            <el-button type="text" size="small" @click="editClassify(group.classifyId,group)">编辑</el-button>
                            <el-button type="text" size="small" @click="deleteClassify(group.classifyId)">删除</el-button>
                            <el-button type="text" size="small" @click="addClassify(group.classifyId)">新增子项</el-button>
                          </td>
                        </tr>
                        <tr v-for="(item, index) in group.subitemList" v-if="group.isShow">
                          <td>{{item.itemCode}}</td>
                          <td>{{item.subitemName}}</td>
                          <td>{{item.unit}}</td>
                          <td>{{item.unitCost}}</td>
                          <td>{{item.describe}}</td>
                          <td v-show="isEdit">
                              <el-button type="text" size="small" @click="editItem(item)">编辑</el-button>
                              <el-button type="text" size="small" @click="deleteItems(item.subitemId)">删除</el-button>
                          </td>
                        </tr>
                </tbody>
              </table>
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="pageIndex"
                layout="total, sizes, prev, pager, next, jumper"
                :total="parseInt(subItemTable.count)">
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="项目设置" @click="getProjectset">
            <el-row>
              <el-col :span="21">
                <el-button size="mini" type="primary">新增项目类别</el-button>
              </el-col>
            </el-row>
            <el-table :data="ProjectTableData" border style="width: 100%" class="priceTable" v-loading="loading">
              <el-table-column fixed prop="sortOrder" label="序号" ></el-table-column>
              <el-table-column prop="projectSetName" label="描述"></el-table-column>
              <el-table-column prop="creatTime" label="创建时间" >
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{scope.row.creatTime | format }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="projectSetId" label="排序"></el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                >
                <template slot-scope="scope">
                  <el-button type="text" size="small">编辑</el-button>
                  <el-button type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @current-change="ProjecthandleCurrentChange"
              :current-page="pageIndex"
              layout="total, sizes, prev, pager, next, jumper"
              :total="parseInt(projectData.count)">
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-row>
    <!--子项type编辑-->
    <el-dialog title="提示" :visible.sync="dialogVisibleEdit" width="30%">
      <el-form ref="editClassifyForms" :model="editClassifyForm" label-width="110px" :rules="editClassifyFormRules">
        <el-form-item label="分类名称：" prop="classifyName" >
          <el-col>
            <el-input v-model="editClassifyForm.classifyName" size="small" type="text"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="分类编码：" prop="classifyCode" >
          <el-input v-model="editClassifyForm.classifyCode" size="small" type="text"></el-input>
        </el-form-item>
        <el-form-item label="描述：" prop="describe">
          <el-input v-model="editClassifyForm.describe" size="small" ></el-input>
        </el-form-item>
        <el-form-item label="排序值：" prop="sortOrder">
          <el-input v-model="editClassifyForm.sortOrder" size="small" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleEdit = false" size="small">取 消</el-button>
            <el-button type="primary" @click="saveEditClassify" size="small">保 存</el-button>
        </span>
    </el-dialog>
    <!--子项type新增-->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="55%">
      <el-form ref="addClassifyForms" :model="addClassifyForm" label-width="110px" :rules="addClassifyFormRules">
        <el-form-item label="子项编码：" prop="itemCode" >
          <el-col>
            <span></span>
            <el-col :span="11">
                <el-input v-model="addClassifyForm.itemCode" size="small" type="text"></el-input>
            </el-col>
            <el-col :span="1" type="flex" class="row-bg" justify="center">
              --
            </el-col>
            <el-col :span="11">
                <el-input  size="small" type="text"></el-input>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="子项名称：" prop="subitemName" >
          <el-input v-model="addClassifyForm.subitemName" size="small" type="text"></el-input>
        </el-form-item>
        <el-form-item label="单位：" prop="unit">
          <el-col :span="10">
            <el-select v-model="addClassifyForm.unit" placeholder="请选择">
              <el-option
                size="small"
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="10">
            <el-col :span="6">单价：</el-col>
            <el-col :span="18">
              <el-input v-model="addClassifyForm.unitCost" size="small" type="number"></el-input>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="工艺做法及材料说明：" prop="describe">
          <el-input v-model="addClassifyForm.describe" size="small" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="排序值：" prop="sortOrder">
          <el-input v-model="addClassifyForm.sortOrder" size="small" type="number"></el-input>
        </el-form-item>
      </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false" size="small">取 消</el-button>
              <el-button type="primary" @click="addEditClassify" size="small">保 存</el-button>
          </span>
    </el-dialog>

    <!--编辑详细item-->
    <el-dialog title="提示" :visible.sync="dialogVisible1" width="55%">
      <el-form ref="addClassifyForms1" :model="addClassifyForm1" label-width="110px" :rules="addClassifyFormRules1">
        <el-form-item label="子项编码：" prop="itemCode" >
          <el-col>
            <span></span>
            <el-col :span="11">
              <el-input v-model="addClassifyForm1.itemCode" size="small" type="text"></el-input>
            </el-col>
            <el-col :span="1" type="flex" class="row-bg" justify="center">
              --
            </el-col>
            <el-col :span="11">
              <el-input  size="small" type="text"></el-input>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="子项名称：" prop="subitemName" >
          <el-input v-model="addClassifyForm1.subitemName" size="small" type="text"></el-input>
        </el-form-item>
        <el-form-item label="单位：" prop="unit">
          <el-col :span="10">
            <el-select v-model="addClassifyForm1.unit" placeholder="请选择">
              <el-option
                size="small"
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="10">
            <el-col :span="6">单价：</el-col>
            <el-col :span="18">
              <el-input v-model="addClassifyForm1.unitCost" size="small" type="number"></el-input>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="工艺做法及材料说明：" prop="describe">
          <el-input v-model="addClassifyForm1.describe" size="small" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="排序值：" prop="sortOrder">
          <el-input v-model="addClassifyForm1.sortOrder" size="small" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible1 = false" size="small">取 消</el-button>
              <el-button type="primary" @click="addEditClassify1" size="small">保 存</el-button>
          </span>
    </el-dialog>
  </el-row>
</template>
<script>
  import {subitemLists,editType,addType,deleteType,editItem,deleteItem,projectsetList} from '@/api/api'
  import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";
  export default {
    components: {ElButton},
    data() {
      return {
        isEdit:false,
        keyWords:'',
        pageIndex:1,
        subItemTable:[],
        subItemTableItem:[],
        dialogVisibleEdit:false,
        dialogVisible: false,
        dialogVisible1:false,
        editClassifyForm:{
          classifyName:'',
          classifyCode:'',
          describe:'',
          sortOrder:''
        },
        addClassifyForm:{
          itemCode:'',
          subitemName:'',
          unit:'',
          unitCost:'',
          sortOrder:''
        },
        addClassifyForm1:{
          itemCode:'',
          subitemName:'',
          unit:'',
          unitCost:'',
          sortOrder:''
        },
        editClassifyFormRules:{
          classifyName:[
            {required:true,message:"请输入分类名称",trigger:'blur,change'},
          ],
          classifyCode:[
            {required:true,message:"请输入分类编码",trigger:'blur,change'},
          ]
        },
        addClassifyFormRules:{
          itemCode:[
            {required:true,message:"请输子项编码",trigger:'blur,change'},
          ],
          subitemName:[
            {required:true,message:"请输入子项名称",trigger:'blur,change'},
          ],
//          unit:[
//            {required:true,message:"请选择单位",trigger:'blur,change'},
//          ],
          unitCost:[
            {required:true,message:"请输入价格",trigger:'blur,change'},
          ],
          describe:[
            {required:true,message:"请输入描述",trigger:'blur,change'},
          ],
        },
        addClassifyFormRules1:{
          itemCode:[
            {required:true,message:"请输子项编码",trigger:'blur,change'},
          ],
          subitemName:[
            {required:true,message:"请输入子项名称",trigger:'blur,change'},
          ],
//          unit:[
//            {required:true,message:"请选择单位",trigger:'blur,change'},
//          ],
          unitCost:[
            {required:true,message:"请输入价格",trigger:'blur,change'},
          ],
          describe:[
            {required:true,message:"请输入描述",trigger:'blur,change'},
          ],
        },
        options: [{
          value: '1',
          label: '平方米'
        }, {
          value: '2',
          label: '户'
        }],
        value: '',
        loading:false,
        pageId:1,
        projectData:'',
        ProjectTableData:[]
      }
    },
    methods:{
      debugg : function () {
        debugger
      },
      getSubitemList(){
        var that=this
        subitemLists().then(data=>{
          that.subItemTable=data
          that.subItemTableItem=data.list
        })
      },
      //分页
      handleCurrentChange(val) {
        this.pageIndex = val;
        this. getSubitemList(val)
      },
      ProjecthandleCurrentChange(val){
        this.pageId = val;
        this.getProjectset(val)
      },
      showToggle(group,index){
        group.isShow = !group.isShow
        this.$set(this.subItemTableItem,index,group);
      },
      editClassify(classifyId,group){//在项目的item编辑
        this.editClassifyForm.classifyId=classifyId,
        this.editClassifyForm=group
        this.dialogVisibleEdit=true
      },
      addClassify(classifyId){
        this.addClassifyForm.classifyId=classifyId,
        this.dialogVisible=true
      },
      saveEditClassify(){
        var that=this
        that.$refs['editClassifyForms'].validate((valide)=>{
          if(valide){
            let formData = new FormData()
            var reqData = {
              classifyName : that.editClassifyForm.classifyName.trim(),
              classifyCode : that.editClassifyForm.classifyCode.trim(),
              describe : that.editClassifyForm.describe.trim(),
              sortOrder : that.editClassifyForm.sortOrder.trim()
            }
            for(var key in reqData){
              formData.append(key,reqData[key])
            }
            editType(this.editClassifyForm.classifyId,formData).then(data=>{
              this.$message.success("保存成功")
              this.dialogVisible=false
              this.getSubitemList()
            })
          }
        })
      },
      addEditClassify(){
        var that=this
        that.$refs['addClassifyForms'].validate((valide)=>{
          if(valide){
            debugger
            let formData = new FormData()
            var reqData = {
              itemCode : that.addClassifyForm.itemCode.trim(),
              subitemName : that.addClassifyForm.subitemName.trim(),
              unit : that.addClassifyForm.unit.trim(),
              unitCost : that.addClassifyForm.unitCost.trim(),
              sortOrder : that.addClassifyForm.sortOrder.trim(),
              classifyId: that.addClassifyForm.classifyId
            }
            for(var key in reqData){
              formData.append(key,reqData[key])
            }
            addType(formData).then(data=>{
              this.$message.success("保存成功")
              this.dialogVisible=false
              this.getSubitemList()
            })
          }
        })
      },
      deleteClassify(classifyId){
        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          deleteType(classifyId).then(data=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getSubitemList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      editItem(item){
        this.dialogVisible1=true
        this.addClassifyForm1.subitemId=item.subitemId,
        this.addClassifyForm1=item
      },
      addEditClassify1(){
        var that=this
        that.$refs['addClassifyForms1'].validate((valide)=>{
          if(valide){
            let formData = new FormData()
            var reqData = {
              itemCode : that.addClassifyForm1.itemCode.trim(),
              subitemName : that.addClassifyForm1.subitemName.trim(),
              unit : that.addClassifyForm1.unit.trim(),
              unitCost : that.addClassifyForm1.unitCost,
              sortOrder : that.addClassifyForm1.sortOrder,
              classifyId: that.addClassifyForm1.classifyId,
              describe:that.addClassifyForm1.describe,
            }
            for(var key in reqData){
              formData.append(key,reqData[key])
            }
            editItem(that.addClassifyForm1.subitemId,formData).then(data=>{
              that.$message.success("保存成功")
              that.dialogVisible1=false
              that.getSubitemList()
            })
          }
        })
      },
      deleteItems(subitemId){
        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          deleteItem(subitemId).then(data=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getSubitemList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      getProjectset(){
        projectsetList(this.pageId).then(data=>{
          this.projectData=data
          this.ProjectTableData=data.list
        })
      }
    },
    filters:{
      format : function (timestamp) {
        var time = new Date(timestamp);
        var year=time.getYear();
        var month=time.getMonth()+1;
        var date=time.getDate();
//        var hour=time.getHours();
//        var minute=time.getMinutes();
//        var second=time.getSeconds();
        return "20"+year+"-"+month+"-"+date
      },
    },
    mounted(){
      this.getSubitemList()
      this.getProjectset()
    }
  }
</script>
<style scoped>
  .ClientBox{
    padding: 100px 20px 10px 250px;
  }
  .ClientBg{
    background-color: white;
    box-shadow: 0 0 6px #e7e7e7;
  }
  .ClientContent{
    padding: 20px;
  }
  .ClientTitle{
    font-size: 12px;
    color: #ffa44c;
  }
  .icon{
    color: #777;
    margin-left: 5px;
    font-size: 15px;
  }
 .priceTable{
   margin-top: 30px;
 }
  .addNewItem{
    text-align: right;
  }
  /*子项设置列表*/
  .mytable
  {
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top: 20px;
  }
  .mytable table
  {
    width: 100%;
    border: 1px solid #999;
    padding: 0;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 15px;
  }

  .mytable th
  {
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #999;
    padding: 0;
    margin: 0;

  }
  .mytable td
  {
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #999;
    padding: 0;
    margin: 0;
  }

  .mytable tr:hover
  {
    background-color: #f8f8f8;
  }

  .mytable tfoot
  {
    width: 100%;
  }

  .mytable  tfoot a{
    text-decoration: none;
    color: #999;
  }
</style>
